<template>
  <div class="my-panel">
    <div class="head" v-if="showHead" slot="head" @click="gotoMore">
      <slot name="icon">
        <img :src="icon" v-if="icon">
      </slot>
      <slot name="title">
        <div class="title">{{title}}</div>
      </slot>
      <slot name="more">
        <div class="more" v-if="more"></div>
      </slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      icon:{
        type:String,
        default(){
          return ""
        }
      },
      title:{
          type:String,
          default(){
            return ""
          }
      },
      more:{
        type:Boolean,
        default(){
          return false
        }
      }
    },
    computed:{
      showHead(){
        return this.title||this.$slots["head"]||this.$slots["title"]||this.$slots["icon"]||this.$slots["more"]
      }
    },
    data () {
      return {
      }
    },
    methods:{
      gotoMore(){
        if(this.more){
          this.$emit("goto-more")
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-panel {
    margin:.15rem .3rem;
    padding:.3rem .3rem 0 .3rem;
    box-shadow: 0 .04rem .16rem 0 rgba(61, 107, 127, 0.14);
    border-radius: .22rem;
    display: flex;
    flex-direction: column;
    background-color: white;
    .head{
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom:.01rem solid #ECEEF0;
      padding-bottom: .3rem;
      margin-bottom: .3rem;
      .icon {
        width: .58rem;
        height: .58rem;
        flex-shrink: 0;
        margin-right: .2rem;
      }
      .title {
        color: #333333;
        flex-grow: 1;
        font-size: .36rem;
        font-weight: 600;
        line-height: .58rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .more{
        background-image: url(/images/login/icon-xiangyoujiantou.png);
        height: .26rem;
        width: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
        flex-shrink: 0;
      }
    }

  }
</style>

